<template>
	<view class="walletMain">
		<view class="title flex align-center justify-between">
			<text>我的钱包</text>
			<!-- <text @click="jumpIncomeTap">收益明细</text> -->
		</view>
		<view class="totalMain">
			<view class="totalBox">
				<view class="top">
					<view>
						{{ wallet.total_income? $tools.format(wallet.total_income) :'0.00'}}
					</view>
					<text>累计收益 (元)</text>
				</view>
				<view class="sub flex align-center justify-around">
					<view class="item">
						<view>
							{{wallet.day_income? $tools.format(wallet.day_income):'0.00' }}
						</view>
						<text>今日收益 (元)</text>
					</view>
					<view class="item">
						<view>
							{{ wallet.total_balance == "0" ? "0.00" : $tools.format(wallet.total_balance) }}
						</view>
						<text>可提现余额 (元)</text>
					</view>
				</view>
			</view>
		</view>
		<view class="menuMain">
			<view class="menuBox">
				<!-- <u-cell-group>
					<u-cell-item icon="rmb" title="立即提现"
						:value="'可提现:' + (wallet.total_balance == '0' ? '0.00' : $tools.format(wallet.total_balance))"
						@click="withdrawalTab"></u-cell-item>
					<u-cell-item icon="order" title="提现记录" @click="$u.route('/pages/wallet/withdrawalRecord')">
					</u-cell-item>
					<u-cell-item icon="grid" title="我的结算卡" @click="$u.route('/pages/wallet/bankCard')"></u-cell-item>
				</u-cell-group> -->
				<view class="boxItem flex align-center justify-between" @click="withdrawalTab">
					<view class="flex align-center justify-between">
						<image src="../../static/images/icon_tixian.png" mode="widthFix"></image>
						<text>立即提现</text>
					</view>
					<view class="flex align-center justify-between">
						<text style="font-size: 28rpx;color: #999;">可提现 {{wallet.total_balance == '0' ? '0.00' : $tools.format(wallet.total_balance)}}</text>
						<u-icon
						  class="uIcon"
						  name="arrow-right"
						  color="#999"
						  size="28"
						></u-icon>
					</view>
				</view>

				<view class="boxItem flex align-center justify-between" @click="$u.route('/pages/wallet/withdrawalRecord')">
					<view class="flex align-center justify-between">
						<image src="../../static/images/icon_record.png" mode="widthFix"></image>
						<text>提现记录</text>
					</view>
					<view class="flex align-center justify-between">
						<u-icon
						  class="uIcon"
						  name="arrow-right"
						  color="#999"
						  size="28"
						></u-icon>
					</view>
				</view>

				<view class="boxItem flex align-center justify-between" @click="$u.route('/pages/wallet/bankCard')">
					<view class="flex align-center justify-between">
						<image src="../../static/images/icon_card.png" mode="widthFix"></image>
						<text>我的结算卡</text>
					</view>
					<view class="flex align-center justify-between">
						<u-icon
						  class="uIcon"
						  name="arrow-right"
						  color="#999"
						  size="28"
						></u-icon>
					</view>
				</view>

				<view class="boxItem flex align-center justify-between" @click="$u.route('/pages/wallet/walletDetail')">
					<view class="flex align-center justify-between">
						<image src="../../static/images/icon_wallet.png" mode="widthFix"></image>
						<text>钱包明细</text>
					</view>
					<view class="flex align-center justify-between">
						<u-icon
						  class="uIcon"
						  name="arrow-right"
						  color="#999"
						  size="28"
						></u-icon>
					</view>
				</view>

			</view>
		</view>
		<toast></toast>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wallet: {
					total_income: 0.00,
					day_income: 0.00,
					balance: 0.00,
					total_balance: 0.00
				},
			};
		},
		onLoad() {
			// this.withdrawMoney()
		},
		onShow() {
			this.withdrawMoney();
		},
		methods: {
			withdrawMoney() {
				this.$u.api
					.income()
					.then((res) => {
						if (res.status == 200) {
							let datas = res.result;
							this.wallet.total_income = (datas.total_income).replace(/,/g, '');
							this.wallet.day_income = (datas.day_income).replace(/,/g, '');
							this.wallet.balance = (datas.balance).replace(/,/g, '');
							this.wallet.freeze_balance = (datas.freeze_balance).replace(/,/g, '');
							// this.wallet.total_balance = (parseFloat(this.wallet.balance) * 1000 + parseFloat(this.wallet.freeze_balance) * 1000) / 1000;
                            let total_balance = (parseFloat(this.wallet.balance) * 1000 + parseFloat(this.wallet.freeze_balance) * 1000) / 1000;
                            this.wallet.total_balance = total_balance.toFixed(2)
						}
					})
					.catch((res) => {
						if (res.errMsg == "request:fail timeout") {
							this.$u.toast("请求超时，请重试!");
						} else if (res.errMsg == "request:fail") {
							this.$u.toast("请求失败，请重试");
						} else {
							 this.$u.toast("请求失败，请重试");
						}
						this.$loading(false);
						setTimeout(() => {
							this.$u.route({
								type: "navigateBack",
								delta: 1,
							});
						}, 2000);
					});
			},

			jumpIncomeTap() {
				this.$u.route({
					url: "/pages/sytj/sytj",
					type: "tab",
				});
			},

			withdrawalTab() {
				let isBindCard = uni.getStorageSync("loginInfo").isBindCard;
				if (isBindCard == 0) {
					this.$refs.uToast.show({
						title: "请先绑定结算卡",
						type: "error",
						duration: 1200,
					});
				} else {
					this.$u.route({
						url: "/pages/wallet/withdrawal",
						type: "navigateTo",
					});
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.walletMain {
		.title {
			padding: 40rpx 0 32rpx 32rpx;

			text {

				&:nth-of-type(1) {
					font-size: 38rpx;
					font-weight: bold;
					letter-spacing: 2rpx;
					color: #000;
				}

				&:nth-of-type(2) {
					margin-right: 32rpx;
					font-size: 26rpx;
					padding: 13rpx 25rpx;
					// background-image: linear-gradient(to top, #fc6306 0%, #fb4535 100%);
					background-color: #ffecdd;
					color: #ff8227;
					border: 1rpx solid #ff8227;
					border-radius: 30rpx;
				}
			}
		}

		.totalMain {
			padding: 0 30rpx;

			.totalBox {
				height: 280rpx;
				border-radius: 20rpx;
				position: relative;
				background: #fff url("../../static/images/bg_card_money.png") no-repeat;
				background-size: 100% 100%;
				text-align: center;

				.top {
					padding-top: 36rpx;
					letter-spacing: 1rpx;
					&>text {
						padding-top: 10rpx;
						font-size: 24rpx;
						color: #fff;
						display: block;
						opacity: 0.8;
					}

					&>view {
						font-size: 54rpx;
						font-family: "numberFont";
						color: #fff;
						letter-spacing: 4rpx;


						text {
							font-size: 32rpx;
							position: relative;
							margin-left: 5rpx;
						}
					}
				}

				.sub {
					padding-top: 32rpx;

					.item {
						color: #fff;
						text-align: center;
						letter-spacing: 1rpx;

						>text {
							display: block;
							padding-top: 10rpx;
							font-size: 24rpx;
							opacity: 0.8;
						}

						>view {
							font-size: 34rpx;
							font-family: "numberFont";
							letter-spacing: 4rpx;
						}
					}
				}
			}
		}

		.menuMain {
			padding: 20rpx 30rpx;

			.menuBox {
				padding: 52rpx 28rpx 52rpx 20rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				border-radius: 20rpx;
				overflow: hidden;
				background-color: #fff;
				height: 380rpx;

				.boxItem{
					image{
						width: 32rpx;
						height: 32rpx;
						margin-right: 22rpx;
					}
					text{
						color: #000;
						font-size: 32rpx;
					}
					view{
						.uIcon{
							margin-left: 22rpx;
						}
					}
				}

			}
		}
	}
</style>
